import React,{useEffect, useMemo, useState} from 'react'
import { Tabs } from 'react-vant'
import {useSelector,useDispatch} from "react-redux"
import * as action from "../action"
import {useNavigate} from "react-router-dom"
import {debounce,throttle} from "lodash"
// useMemo , useCallback

function Classfily() {
   let [sum,setSum] = useState(0)
   let [arr,setArr] = useState([1,2,3,4])
   // useMemo 用于缓存一个值，他可以用来模拟vue里的computed，他有一个返回值
  //  useMemo(()=>{
      

  //  },[])
  // 页面一render 相当于组件里所有的方法都重新声明了一遍，虽然这两个函数看起来一样，但是字内存中重新开辟了一个空间
   let sum1= useMemo(()=>{
     console.log("render");
      let a =   arr.reduce((a,b)=>{
        return a + b + sum
       },0)
      return a
  },[sum]) // 依赖项如果是一个空数组，那么就和useEffect一样，只会默认执行一次
  

  let navgiate = useNavigate()
  let dispacth = useDispatch()
  let store = useSelector((state)=>{
    return {
      ...state.homereducer
    }
  })
  useEffect(()=>{
    // 请求传参，传男生和女生
     dispacth(action.getfenlei())
  },[])
  let goinfo = (sex,data)=>{
      console.log(sex,data);
      navgiate("/info",{
        state:{
          sex,
          data
        }
      }
      )
  }
  let fn = ()=>{
   setSum((sum)=>sum+=1)
  }
  return (
    <>
       <Tabs defaultActive={2}>
          <Tabs.TabPane key={1} title={`男生`}>
               {
                 store.fenleidata.man &&   store.fenleidata.man.length ?  store.fenleidata.man.map((item,index)=>{
                   return <div key={index}>
                       <h3>{item.tit}</h3>
                       {
                         item.children.map((ite,ind)=>{
                           return <li key={ind} onClick={()=>{goinfo("男",ite)}}>{ite.tit}</li>
                         })
                       }
                   </div>
                 }):""

               }
          </Tabs.TabPane>
          <Tabs.TabPane key={2} title={`女生`}>
          {
                 store.fenleidata.women &&   store.fenleidata.women.length ?  store.fenleidata.women.map((item,index)=>{
                   return <div key={index}>
                       <h3>{item.tit}</h3>
                       {
                         item.children.map((ite,ind)=>{
                           return <li key={ind} onClick={()=>{goinfo("女",ite)}} >{ite.tit}</li>
                         })
                       }
                   </div>
                 }):""

               }
          </Tabs.TabPane>
      </Tabs>
      <button onClick={throttle(fn,2000,{leading:false})}>点击</button>
      {/* <h3>{sumzong()}</h3> */}
      <h3>{sum1}</h3>
    </>

   

   
  )
}

export default Classfily